<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <template v-for="item in optList">
        <el-tab-pane v-if="item.isShow" :key="item.code" :name="item.code">
          <span slot="label"><i :class="item.icon" /> {{ item.name }}</span>
        </el-tab-pane>
      </template>
    </el-tabs>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
    <compassword ref="refpassword" />
  </div>
</template>
<script>
import compassword from '@/views/game/manage/compassword/compassword.vue';
import { getRoles } from '@/lib/auth';
import { SetCompetitionToken } from '@/lib/auth';
import {
  api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'SubstationGameDetail',
  components: {
    compassword
  },
  data() {
    return {
      activeName: '',
      optList: []
    };
  },
  computed: {
    key() {
      const $route = this.$route;
      let _path = null;
      if ($route.meta.animateKey) {
        _path = $route.meta.animateKey.split('/');
        _path = _path.map(item => {
          if (item.indexOf(':') > -1) {
            return $route.params[item.replace(':', '')];
          }
          return item;
        });
        _path = _path.join('/');
      }
      return _path || this.$route.path;
    }
  },
  watch: {
    '$route': {
      handler: function(val, old) {
        this.init();
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const $route = this.$route;
      this.gameId = this.$route.params.id;
      const _optList = [
        {
          code: 'SubstationGameEdit',
          name: '赛事编辑',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameCreateEvent',
          name: '创建项目',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameClassification',
          name: '项目分类',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameExpenses',
          name: '费用设置',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameSchedule',
          name: '日程安排',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameData',
          name: '数据管理',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationIntegralSetting',
          name: '积分设置',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationGameExecte',
          name: '赛事执行',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'SubstationLogisticsHotel',
          name: '后勤管理',
          icon: '',
          isShow: !!this.gameId,
          auth: ['Logistics']
        }
      ];
      this.activeName = $route.meta.activeTab || $route.name;
      const _showList = [];
      _optList.map(item => {
        if (item.isShow) {
          let _hasAuth = false;
          if (item.auth) {
            const roles = getRoles();
            item.auth.map(jtem => {
              if (roles.includes(jtem)) {
                _hasAuth = true;
              }
            });
          } else {
            _hasAuth = true;
          }
          if (_hasAuth) {
            _showList.push(item);
          }
        }
      });
      this.optList = _showList;
    },
    handleClick(val) {
      const name = val.name;
      const { query } = this.$route;
      if (val.name === 'SubstationGameExecte') {
        api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.gameId).then(res => {
          if (res.hasPassword) {
            this.$refs.refpassword.passwordVisible = true;
            this.$refs.refpassword.gameId = this.gameId;
            this.$refs.refpassword.buthiden = 'SubstationGameExecte';
            this.$refs.refpassword.GameExecte = false;
            this.$refs.refpassword.tenantId = this.tenantId;
            this.$refs.refpassword.query = query;
            this.activeName = this.$route.meta.activeTab || this.$route.name;
          } else {
            SetCompetitionToken(this.gameId + ';');
            this.$router.push({
              name: name,
              params: { tenantId: 't__' + (this.tenantId || '') },
              query: {
                gameName: query.gameName || ''
              }
            });
          }
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
        return;
      }
      this.$router.push({
        name: name,
        params: {
          tenantId: 't__' + (this.tenantId || '')
        },
        query: {
          gameName: query.gameName || ''
        }
      });
    }
  }
};
</script>
